<template>
  <!-- 添加或修改枚举项 -->
  <dt-dialog :title="textMap[dialogStatus]" :is-loading="loading" :visible.sync="open"
             @comfirmBtn="submit" @closeDialog="resetData">
    <div slot="content">
      <el-form ref="dataItemForm" :model="dataItemForm" :rules="rules"
               label-width="100px">
        <el-form-item label="枚举项名称" prop="materialName">
          <el-input v-model.trim="dataItemForm.materialName" placeholder="请输入枚举项名称" maxlength="30"
                    show-word-limit class="limit" />
        </el-form-item>
        <el-form-item label="枚举项编码" prop="materialCode">
          <autofillInput v-if="open" ref="autofillInputRef" v-model="dataItemForm.materialCode"
                         :disabled="dialogStatus==='update'?true:false" :autofill-size="8" :maxlength="'30'"
                         :label="'枚举项编码'" :status ="dialogStatus" />
        </el-form-item>
      </el-form>
    </div>
  </dt-dialog>
</template>
<script>
import autofillInput from '@/framework/components/dt-autofillInput/index.vue'
import { basicMaterialAdd, basicMaterialEdit } from '@/framework/api/developerCenter/basicData'
import { checkParameterName } from '@/framework/utils/validate'

export default {
  components: {
    autofillInput
  },
  data() {
    const regMaterialCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入枚举项编码'))
      } else if (!checkParameterName(value)) {
        callback(new Error('请输入1-30位数字或大小写字母'))
      } else {
        callback()
      }
    }
    return {
      textMap: {
        update: '修改枚举项',
        create: '新建枚举项'
      },
      open: false,
      dialogStatus: '',
      dataItemForm: {
        materialName: '',
        materialCode: ''
      },
      loading: false,
      materialTypeId: '',
      rules: {
        materialName: [
          { required: true, message: '请输入枚举项名称', trigger: 'change' }
        ],
        materialCode: [
          { required: true, validator: regMaterialCode, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    handleData(row, type, materialTypeId) {
      this.open = true
      this.materialTypeId = materialTypeId
      this.$nextTick(() => {
        this.$refs.dataItemForm.clearValidate()
      })
      if (type === 'add') {
        this.dialogStatus = 'create'
      } else {
        this.dialogStatus = 'update'
        this.dataItemForm = { ...row }
      }
    },
    resetData() {
      this.dataItemForm = {
        materialName: '',
        materialCode: ''
      }
      this.$refs.dataItemForm.clearValidate()
    },
    submit() {
      this.$refs.dataItemForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.dataItemForm.materialTypeId = this.materialTypeId
          try {
            if (this.dialogStatus === 'create') {
              const data = Object.assign({}, this.dataItemForm)
              basicMaterialAdd(data).then((res) => {
                this.open = false
                this.$emit('getItemList')
                this.$message.success('新增成功')
              })
            } else {
              const data = Object.assign({}, this.dataItemForm)
              basicMaterialEdit(data).then((res) => {
                this.open = false
                this.$emit('getItemList')
                this.$message.success('修改成功')
              })
            }

            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>
